<script setup>
import { ref } from 'vue';
import { Bell } from '@element-plus/icons-vue';
import router from "@/router/index.js";

// 模拟数据
const noticesData = {
  news: [
    { id: 1, content: '西南石油大学2024年10月选聘教辅工作人员公告...', date: '2024-10-15' },
    // 更多数据...
  ],
  examRecruitmentTeacher: [
    { id: 1, content: '西南石油大学2024年10月选聘辅导员公告...', date: '2024-10-15' },
  ],
  examRecruitmentStaff: [

  ],
  postdocRecruitment:[

  ]
  // 其他分类数据...
};

const cards = ref([
  { id: 'news', title: '通知公告' },
  { id: 'examRecruitmentTeacher', title: '考核招聘事业编制教师' },
  { id: 'examRecruitmentStaff', title: '考核招聘事业编制' },
  { id: 'important', title: '博士后招聘' },
]);

const activeCard = ref('news');
const currentNotices = ref(noticesData[activeCard.value]);

const switchNotices = (cardId) => {
  activeCard.value = cardId;
  currentNotices.value = noticesData[cardId];
};

function navigateToDetail() {
  router.push('/index/noticeDetail');
}
</script>

<template>
  <div class="container">
    <!-- 左侧通知区域 -->
    <div class="left-panel">
      <div class="title-bar">
        <el-icon class="notice-icon"><Bell /></el-icon>
        <span class="title">招聘计划</span>
        <a href="#" class="view-all">收看全部</a>
      </div>

      <transition-group name="list" tag="div" class="notice-list">
        <div v-for="notice in currentNotices" :key="notice.id" class="notice-item">
          <span class="content" @click="navigateToDetail">{{ notice.content }}</span>
          <span class="date">{{ notice.date }}</span>
        </div>
      </transition-group>
    </div>

    <!-- 右侧卡片区域 -->
    <div class="right-panel">
      <div v-for="card in cards" :key="card.id" class="card" :class="{ 'active': activeCard === card.id }" @click="switchNotices(card.id)" >
        {{ card.title }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  height: 340px;
  background: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.left-panel {
  flex: 0 0 30%;
  padding: 15px;
  border-right: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  margin-left: 15%;
}

.title-bar {
  display: flex;
  align-items: center;
  height: 42px;
  margin-bottom: 15px;
  color: #2c3e50;
}

.notice-icon {
  font-size: 20px;
  color: #3b82f6;
  margin-right: 10px;
}

.title {
  font-size: 16px;
  font-weight: 600;
  flex-grow: 1;
}

.view-all {
  font-size: 12px;
  color: #3b82f6;
  text-decoration: none;
}

.notice-list {
  height: calc(340px - 72px);
  overflow-y: auto;
}

.notice-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.3s;
}

.content {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748b;
  cursor: pointer;
}

.content:hover {
  color: #3b82f6;
}

.date {
  flex-shrink: 0;
  margin-left: 15px;
  color: #94a3b8;
}

.right-panel {
  flex: 1;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-right: 15%;
}

.card {
  background: white;
  border-radius: 6px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #3b82f6;
  border: 1px solid #e2e8f0;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.2);
}

.card.active {
  background: #3b82f6;
  color: white;
  border-color: transparent;
}

/* 过渡动画 */
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style>